<!DOCTYPE html>
<html>
<head>
  <title>Multiple ECharts with Spring Boot and Axios</title>
  <!-- 引入 ECharts 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <!-- 引入 Axios 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <style>
    .chart {
      height: 300px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<!-- 折线图容器 -->
<div id="lineChart" class="chart"></div>
<!-- 柱状图容器 -->
<div id="barChart" class="chart"></div>
<!-- 饼图容器 -->
<div id="pieChart" class="chart"></div>

<script type="text/javascript">
  // 定义一个函数用于初始化图表
  function initChart(divId, option) {
    var chart = echarts.init(document.getElementById(divId));
    chart.setOption(option);
  }

  // 使用Axios获取数据并更新图表
  Promise.all([
    axios.get('/api/line-data'),
    axios.get('/api/bar-data'),
    axios.get('/api/pie-data')
  ]).then(function (responses) {
    // 分别处理每个API响应，并初始化对应的图表
    initChart('lineChart', {
      xAxis: { type: 'category', data: responses[0].data.map(item => item.day) },
      yAxis: { type: 'value' },
      series: [{ data: responses[0].data.map(item => item.value), type: 'line' }]
    });

    initChart('barChart', {
      xAxis: { type: 'category', data: responses[1].data.map(item => item.day) }, // 修改这里，确保使用正确的字段
      yAxis: { type: 'value' },
      series: [{ data: responses[1].data.map(item => item.value), type: 'bar' }]
    });

    initChart('pieChart', {
      title: { text: 'Referer of a Website', subtext: 'Fake Data', left: 'center' },
      tooltip: { trigger: 'item' },
      legend: { orient: 'vertical', left: 'left' },
      series: [{
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: responses[2].data.map(item => ({ value: item.value, name: item.name })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    });
  }).catch(function (error) {
    console.error("Error fetching chart data:", error);
  });
</script>
</body>
</html>修改左右宽度